<template>
  <div class="container">
    <div id="top" class="top" />
    <div id="bottom_left" class="bottom left" />
    <div id="bottom_right" class="bottom right" />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
const { jsPlumb } = require('jsplumb')

onMounted(() => {
  jsPlumb.ready(function () {
    const common = {
      anchor: 'Continuous',
      endpoint: 'Dot', // 端点样式
      connector: ['Flowchart'], // 连接线
      maxConnections: -1 // 连接条数
    }

    const t = jsPlumb.addEndpoint('top', {
      anchor: ['Bottom'] // 端点位置
    }, common)
    const bl = jsPlumb.addEndpoint('bottom_left', {
      anchor: ['Top'] // 端点位置
    }, common)
    const br = jsPlumb.addEndpoint('bottom_right', {
      anchor: ['Top'] // 端点位置
    }, common)

    jsPlumb.connect({
      source: t,
      target: bl,
      overlays: [['Arrow', { width: 12, length: 12, location: 1 }]] // 箭头
    })
    jsPlumb.connect({
      source: t,
      target: br,
      overlays: [['Arrow', { width: 12, length: 12, location: 1 }]] // 箭头
    })

    jsPlumb.draggable(['top', 'bottom_left', 'bottom_right'])
  })
})

</script>

<style lang="scss" scoped>
.container{
  position: relative;
  width: 90%;
  height: 500px;
  margin-bottom: 40px;
  border: 1px solid red;
  ::v-deep{
    .jtk-endpoint{
      transform: translate(50%, 50%);
    }
    .jtk-endpoint,
    .jtk-endpoint svg,
    .jtk-endpoint circle{
      display: none;
      width: 10px !important;
      height: 10px !important;
      cx: 5;
      cy: 5;
      r: 5;
    }
  }
}
.top, .bottom{
  position: absolute;
  left: 200px;
  top: 20px;
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}
.bottom{
  &.left{
    top: 250px;
    left: 100px;
  }
  &.right{
    top: 250px;
    left: 300px;
  }
}

</style>
